
<template>
	<view class="home"  v-if="show" @click.self="close" :class="showPay ? 'on-bg' : 'off-bg'">
		<view class="contengt" @click.stop v-if="show" :class="showPay ? 'on' : 'off'">
			<view class="title">
				<image src="@/static/pay-img/close-pay.png" mode="" class="pay-img" @click="close"></image>
				<text>
					收银台
				</text>
			</view>
			<view class="contengt-item">
				<radio-group @change="radioChange">
					<block v-for="(item, index) in items" :key="item.value">
						<label class="item" v-if="item.status==1">
							<view class="item-left">
								<view class="item-img">
									<image :src="item.imgUrl" mode="" class="item-pay-img"></image>
								</view>
								<view>{{item.name}}</view>
							</view>
							<view> 
								<radio :value="item.value" :checked="index === current" style="transform:scale(0.7)"
									color='#5090F1' />
							</view>
						</label>
					</block>
					
				</radio-group>
			</view>
			<button class="submit" @click="goPay">确定</button>
		</view>

	</view>
</template>


<script>
	export default {
		props: {
			apiUrl: {
				type: String,
				default: "",
			},
			showPay: {
				type: Number,
				default: 0,
			},
			data: {
				type: Object,
				default: function() {
					return {};
				}
			},
		},
		watch:{
			showPay(newData,oldData){
				// console.log(newData,oldData)
				if(newData==1){
					this.show=true
				}else{
					setTimeout(()=>{
						this.show=false
					},300)
					
				}
			}
		},
		data() {
			return {
				items: [
					{
						value: 'weixin',
						name: '微信',
						checked: 'true',
						imgUrl: '/static/pay-img/weixin-pay.png',
						status: 1
					},
					{
						value: 'alipay',
						name: '支付宝',
						imgUrl: '/static/pay-img/ali-pay.png',
						status: 1
					},
					{
						value: 'onekeypay',
						name: '快捷',
						imgUrl: '/static/pay-img/bank-pay.png',
						status: 1
					}
				],
				current: 0,
				show: false,
			}
		},
		mounted() {
			// 判断不同平台支付显示
			// #ifdef H5
			if(navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) { //微信公众号
				this.items[1].status = 0
			}
			// #endif
			// #ifdef MP
			this.items[1].status = 0
			this.items[2].status = 0
			// #endif
		},
		methods: {
			goPay() {
				let _this = this;
				let code = this.items[this.current].value;
				let payType = ""
				if(code=="weixin") {
					// #ifdef H5
					if(navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) {
						payType = 'wechat' //微信公众号
					}else {
						payType = 'wechatQr' //微信H5
					}
					// #endif
					// #ifdef MP
					payType = 'routine' //微信小程序
					// #endif
					// #ifdef APP-PLUS
					payType = 'wechatApp' //微信APP
					// #endif
				}else if(code=="alipay") {
					// #ifdef H5
					payType = 'alipayQr' //支付宝H5
					// #endif
					// #ifdef APP-PLUS
					payType = 'alipayApp' //支付宝APP
					// #endif
				}else if(code=="onekeypay") {
					// #ifdef H5 || APP-PLUS
					payType = 'onekeypay' //银联快捷
					// #endif
				}
				uni.showLoading({title: '支付中'});
				uni.request({
				    url: _this.apiUrl,
				    method: 'post',
				    data: {
				        payType: payType,
				        data: _this.data
				    },
				    success: (res) => {
						uni.hideLoading();
						let response = res.data;
						if(!response.status) {
							return uni.showToast({
								icon: 'none',
								title: response.msg ? response.msg : "系统错误"
							})
						}
						switch (payType) {
							case 'wechat':
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', response.data,
									function(ress) {
										if (ress.err_msg == "get_brand_wcpay_request:ok") {
											uni.showToast({
												icon: 'success',
												title: '支付成功'
											})
											_this.$emit('payResult', 'success');
										} else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
											uni.showToast({
												icon: 'none',
												title: '取消支付'
											})
											_this.$emit('payResult', 'error');
										} else {
											uni.showToast({
												icon: 'none',
												title: '支付失败'
											})
											_this.$emit('payResult', 'error');
										}
									}
								);
								break;
							case 'routine':
								uni.requestPayment({
									...response.data,
									success: function(res) {
										uni.showToast({
											icon: 'success',
											title: '支付成功'
										})
										_this.$emit('payResult', 'success');
									},
									fail: function(e) {
										uni.showToast({
											icon: 'none',
											title: '取消支付'
										})
										_this.$emit('payResult', 'error');
									},
								})
								break;
							case 'wechatQr':
								window.location.href = response.data;
								_this.$emit('payResult', 'navigate');
								break;
							case 'wechatApp':
								if(_this.isWeixinExist()) {
									plus.runtime.openURL(response.data);
									_this.$emit('payResult', 'navigate');
								}
								break;
							case 'alipayQr':
								window.location.href = 'alipays://platformapi/startapp?saId=10000007&qrcode=' + response.data.source_qr_code_url;
								_this.$emit('payResult', 'navigate');
								break;
							case 'alipayApp':
								if(_this.isAlipayExist()) {
									plus.runtime.openURL('alipays://platformapi/startapp?saId=10000007&qrcode=' + response.data.source_qr_code_url);
									_this.$emit('payResult', 'navigate');
								}
								break;
							case 'onekeypay':
								// #ifdef H5
								window.location.href = response.data;
								_this.$emit('payResult', 'navigate');
								// #endif
								// #ifdef APP-PLUS
								plus.runtime.openURL(response.data);
								_this.$emit('payResult', 'navigate');
								// #endif
								break;
						}
						
				    }
				});
			},
			radioChange: function(evt) {
				// console.log(evt.detail.value, '付款方式')
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			close(){
				this.$emit('update:showPay',0)
			},
			isWeixinExist () {
				if(!plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
					uni.showToast({
						icon: 'none',
						title: '微信应用未安装'
					})
					return false;
				}
				return true;
			},
			isAlipayExist () {
				if(!plus.runtime.isApplicationExist({pname:'com.eg.android.AlipayGphone',action:'alipay://'})){
					uni.showToast({
						icon: 'none',
						title: '支付宝应用未安装'
					})
					return false;
				}
				return true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, .3);
		z-index: 99;

		.contengt {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;

			background: #ffffff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			overflow: hidden;

			.title {
				width: 100%;
				height: 90rpx;
				background-color: rgb(244, 244, 244);
				font-size: 32rpx;
				color: #000000;
				line-height: 90rpx;
				text-align: center;
				position: relative;

				.pay-img {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					top: 50%;
					left: 20rpx;
					transform: translateY(-50%);
				}
			}

			.contengt-item {
				.item {
					width: 90%;
					padding: 30rpx 5% 0 5%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-left {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #000;

						.item-img {
							width: 50rpx;
							height: 50rpx;
							margin-left: 30rpx;
							margin-right: 20rpx;

							.item-pay-img {
								width: 100%;
								height: 100%;
							}
						}
					}

				}
			}

			.submit {
				width: 600rpx;
				height: 70rpx;
				border-radius: 15rpx;
				background-color: #5090F1;
				font-size: 28rpx;
				color: #ffffff;
				margin-top: 300rpx;
			}
		}
	}
     
	 /*拉起支付动画*/
	.on {
		animation-name: animate;
		/*制定动画名称*/
		animation-duration: 300ms;
		/*动画持续时间*/
		animation-fill-mode: forwards;
		/*动画停留在终点*/
	}

	@keyframes animate {
		from {
			height: 0vh;
		}

		to {
			height: 60vh;
		}
	}
	/*拉起支付动画*/
	.on-bg {
		animation-name: animatebg;
		/*制定动画名称*/
		animation-duration: 300ms;
		/*动画持续时间*/
		animation-fill-mode: forwards;
		/*动画停留在终点*/
	}
	
	@keyframes animatebg {
		from {
			 opacity: 0;
		}
	
		to {
			 opacity: 1;
		}
	}
	
	 /*关闭支付动画*/
	.off {
		animation-name: animateoff;
		/*制定动画名称*/
		animation-duration: 300ms;
		/*动画持续时间*/
		animation-fill-mode: forwards;
		/*动画停留在终点*/
	}
	
	@keyframes animateoff {
		from {
			height: 60vh;
		}
	
		to {
			height: 0vh;
		}
	} 
	
	/*关闭支付动画*/
	.off-bg {
		animation-name: animateoffbg;
		/*制定动画名称*/
		animation-duration: 300ms;
		/*动画持续时间*/
		animation-fill-mode: forwards;
		/*动画停留在终点*/
	}
	
	@keyframes animateoffbg {
		from {
			 opacity: 1;
		}
	
		to {
			 opacity: 0;
		}
	}
</style>
